<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09_自定义JS对象</title>
</head>
<body>
<table border="1px">
    <caption>商品表</caption>
    <tr>
        <th>商品标题</th>
        <th>商品价格</th>
        <th>商品库存</th>
    </tr>
    <script>
        let productArr=[
            {title:'小米',price:5000,num:200},
            {title:'华为',price:8000,num:300},
            {title:'苹果',price:10000,num:400},
            {title:'魅族',price:2000,num:500},
        ]
        let table=document.querySelector('table');
        for(let i=0;i<productArr.length;i++){
            console.log(productArr[i]);
            let tr=document.createElement('tr');
            let titletd=document.createElement('td');
            let pricetd=document.createElement('td');
            let numtd=document.createElement('td');
            titletd.innerHTML=productArr[i].title;
            pricetd.innerHTML=productArr[i].price;
            numtd.innerHTML=productArr[i].num;
            tr.append(titletd,pricetd,numtd);
            table.append(tr);
        }
    </script>
</table>
</body>
</html>